import React, { Component } from 'react';

import '@/_app';

import '~/static/reset.css';

import { LoadingOutlined } from '@ant-design/icons';
import Head from '@/layout/Head';
import Header from '@/layout/Header';
import Footer from '@/layout/Footer';

class Index extends Component {
  state = {
    //是否手机
    isMobile: false,
  };

  componentDidMount() {
    this.setState({
      isMobile: navigator.userAgent.includes('Mobile'),
    });
  }

  //打开疫情信息
  openMobile = () => {
    window.open('https://doujiabao.com.cn');
  };

  render() {
    const { isMobile } = this.state;

    const { isEmpty, loading } = this.props;

    return (
      <div>
        {isMobile ? (
          <div className="tip">
            <div>并没有适配手机</div>

            <div className="goMobile" onClick={this.openMobile}>
              点我看看疫情信息
            </div>
          </div>
        ) : (
          <React.Fragment>
            {/* head标签 */}
            <Head />
            {/* 公用头部组件 */}
            <Header />
            {/* 内容区域 */}
            {loading ? (
              <div className="loading">
                <LoadingOutlined />
              </div>
            ) : (
              <div className="content">
                {isEmpty ? (
                  <div className="empty">这里是空的，去其它地方看看吧...</div>
                ) : (
                  <React.Fragment>
                    {this.props.children}
                    {/* 公用底部组件 */}
                    <Footer />
                  </React.Fragment>
                )}
              </div>
            )}
          </React.Fragment>
        )}

        {/* 样式 */}
        <style jsx>{`
          .tip {
            color: #ffffff;
            text-align: center;
            margin-top: 20%;
          }
          .goMobile {
            border-radius: 10px;
            width: 200px;
            margin: 100px auto 0;
            padding: 10px;
            color: #f39d38;
            background: #000000;
          }
          .content {
            min-width: 1200px;
            box-sizing: border-box;
            border-radius: 4px;
          }
          .empty {
            padding-top: 140px;
            text-align: center;
            color: #000000;
          }
          .loading {
            margin-top: 60px;
            font-size: 40px;
            text-align: center;
            color: #ffffff;
          }
          .nomore {
            text-align: center;
            color: #ffffff;
          }
        `}</style>
      </div>
    );
  }
}

Index.defaultProps = {
  isEmpty: false,
  loading: true,
};

export default Index;
